<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>费用选择</title>

    <script src="../js/iscroll.js"></script>
    <script src="../js/jquery-3.2.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            color: #000;
            font-size: 14px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            overflow-y: auto
        }

        .wrap {
            width: 100%;
            height: 200px;
            background: #fff;
            position: relative;
            text-align: center;
            margin-top: 50px;
            border-top: 1px solid #D6DDE7;
        }

        .wrap .line {
            height: 40px;
            border-top: 1px solid #D6DDE7;
            border-bottom: 1px solid #D6DDE7;
            width: 100%;
            position: absolute;
            top: 40%
        }

        .wrap .item {
            margin: 0;
            padding: 0 3%;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            overflow: hidden;
            height: 200px;
        }

        .wrap .item ul {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            min-height: 120px;
            width: 80px;
            overflow: hidden;
        }

        .wrap .item ul li {
            height: 40px;
            line-height: 40px;
            color: #555;
            font-size: 15px
        }

        .wrap .item ul li.selected {
            color: #26BCD5;
            font-size: 22px;
        }

        .wrap span{
            height: 200px;
            line-height: 200px;
            color:#26BCD5 ;
            font-size: 20px;
            margin-left: -20px;
        }

        /*底部按钮*/
        .foot-btn{
            position: relative;
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-top: 1px solid #D6DDE7;
            border-bottom: 1px solid #D6DDE7;
        }

        .cancel{
            position: relative;
            margin-left: 50px;
            float: left;
            color: #444;
        }

        .confirm{
            position: relative;
            margin-right: 50px;
            float: right;
            color: #26BCD5;
        }

        .warn{
            margin-top: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #555;
            display: none;
        }

    </style>
</head>
<body>

<div class="warn">友情提示</div>
<div class="wrap">
    <div class="line"></div>
    <div class="item" id="scroll-left">
        <ul>
            <li></li>
            <li></li>
            <li data-id="0" class="selected">100</li>
            <li data-id="1">00</li>
            <li data-id="2">01</li>
            <li data-id="3">02</li>
            <li data-id="4">03</li>
            <li data-id="5">04</li>
            <li data-id="6">05</li>
            <li data-id="7">06</li>
            <li data-id="8">07</li>
            <li data-id="9">08</li>
            <li data-id="10">09</li>
            <li data-id="11">10</li>
            <li data-id="12">11</li>
            <li data-id="13"></li>
            <li data-id="14"></li>
        </ul>
    </div>
    <span>元</span>
    <div class="item" id="scroll-right">
        <ul>
            <li></li>
            <li></li>
            <li data-id="0" class="selected">99</li>
            <li data-id="1">00</li>
            <li data-id="2">01</li>
            <li data-id="3">02</li>
            <li data-id="4">03</li>
            <li data-id="5">04</li>
            <li data-id="6">05</li>
            <li data-id="7">06</li>
            <li data-id="8">07</li>
            <li data-id="9">08</li>
            <li data-id="10">09</li>
            <li data-id="11">10</li>
            <li data-id="12">11</li>
            <li data-id="13"></li>
            <li data-id="14"></li>
        </ul>
    </div>
    <span>角</span>
</div>
<div class="foot-btn">
    <span class="cancel">取消</span>
    <span class="confirm">确定</span>
</div>

</body>
<script>

    var yuan;
    var jiao;
    //左边的控件
    var scrollLeft = new IScroll('#scroll-left', {
        vScroll: false,
        snap: 'li',
        hScrollbar: false,
        zoom: true,
        mouseWheel: true,
        wheelAction: 'zoom',
        fadeScrollbars: true
    });

    scrollLeft.on('scrollEnd', function () {
        console.log("我停止了");
        var num = -(scrollLeft.y / 40);
        console.log("滚动条当前信息：" + scrollLeft.x + ">>>" + scrollLeft.y + ">>>" + num);
        $('#scroll-left ul').children('li').each(function () {
            var liPosition = $(this).attr('data-id');
            if (num == liPosition) {
                console.log("~~~" + liPosition);
                $(this).addClass('selected');
                yuan=$(this).text();
            } else {
                $(this).removeClass('selected');
            }
        });
    });


    //右边的控件
    var scrollRight = new IScroll('#scroll-right', {
        vScroll: false,
        snap: 'li',
        hScrollbar: false,
        zoom: true,
        mouseWheel: true,
        wheelAction: 'zoom',
        fadeScrollbars: true
    });


    scrollRight.on('scrollEnd', function () {
        console.log("我停止了");
        var num = -(scrollRight.y / 40);
        console.log("滚动条当前信息：" + scrollRight.x + ">>>" + scrollRight.y + ">>>" + num);
        $('#scroll-right ul').children('li').each(function () {
            var liPosition = $(this).attr('data-id');
            if (num == liPosition) {
                $(this).addClass('selected');
                jiao=$(this).text();
            } else {
                $(this).removeClass('selected');
            }
        });
    });

    $('.cancel').on('click',function () {
       alert("放弃选择");
    });

    $('.confirm').on('click',function () {
        $('.warn').fadeIn('slow');
        $('.warn').text("您的选择是："+yuan+" 元"+jiao+" 角");
    });


</script>

</html>